<template>
<transition name="fade">
  <div class="box">
    <header class="header recipe-header">
      <mt-header title="问答">
        <router-link to="/silk" slot="left">
          <mt-button icon="back"></mt-button>
        </router-link>
      </mt-header>
    </header>
    <div class="content">
      <div class="answer-list">
        <ul>
          <li>
            <h2>宝宝晒太阳有哪些注意事项？</h2>
            <div class="list-cont">
              <img src="./../../assets/baby4.jpg" alt="">
              <span class="user">小糖果</span>
              <p>给宝宝晒太阳好处多多，能够帮小东西合成维生素D，这个东东对促进钙质吸收可是大有好处哦，这就是晒太阳长个子的由来！除此之外还能促进宝宝的新陈代谢增强机体抗病能力呢。当然，宝宝...</p>
            </div>
            <div class="answer-bottom">
              <p><i class="iconfont icon-shoucang1"></i><span>177</span></p>
              <p><i class="iconfont icon-xiaoxi4"></i><span>6</span></p>
            </div>
          </li>
           <li>
            <h2>一岁以下的宝宝不能喝水吗？</h2>
            <div class="list-cont">
              <img src="./../../assets/baby4.jpg" alt="">
              <span class="user">茜茜公主</span>
              <p>6个月内的宝宝，纯母乳喂养无需额外补水，宝宝母乳喂养，母乳是宝宝最好的食品，母乳充足时可以不进食任何其他的液体和固体食物，包括水。母乳中88%都是水，正确、充分的母乳喂养可以保证6月龄以内婴儿对水的需求，甚至在炎热的天气下只要母乳喂...</p>
            </div>
            <div class="answer-bottom">
              <p><i class="iconfont icon-shoucang1"></i><span>99</span></p>
              <p><i class="iconfont icon-xiaoxi4"></i><span>10</span></p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</transition>
</template>

<script>

export default {

}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
  .recipe-header {
    @include rect(100%, 0.44rem);
    line-height: 0.20rem;
    text-align: center;
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);
    font-family: Arial;
    border: 1px solid rgba(255, 255, 255, 0);
    .mint-header {
      background-color: rgba(249, 249, 249, 1);
      h1, .mint-header-button{
        color: rgba(100, 100, 100, 1);
        font-size: 0.14rem;
        .mintui-back {
          font-weight: 900
        }
      }
    }
  }

  .answer-list {
    @include rect(100%, 100%);
    ul {
      @include rect(100%, auto);
      li {
        @include rect(100%, 2.3rem);
        background: #F2F2F2;
        margin-bottom: 0.22rem;
        overflow: hidden;
        h2{
          margin: 0.18rem 0 0.1rem 0.18rem;
          line-height: 0.20rem;
          color: rgba(16, 16, 16, 1);
          font-size: 0.14rem;
          text-align: left;
          font-family: PingFangSC-regular;
          font-weight: 600;
        }
        .list-cont {
          @include rect(3.3rem, auto);
          margin-left: 0.18rem;
          img {
            @include rect(0.3rem, 0.3rem);
            border-radius: 50%;
            margin-bottom: 0.05rem;
            border: 1px solid rgba(255, 255, 255, 0);
          }
          .user {
            display: inline-block;
            color: rgba(102, 102, 102, 1);
            font-size: 0.12rem;
            text-indent: 0.1rem;
            font-family: PingFangSC-regular;
          }
          p {
            line-height: 0.2rem;
            color: rgba(102, 102, 102, 1);
            font-size: 0.12rem;
            font-family: PingFangSC-regular;
          }
        }
        .answer-bottom {
          height: 0.2rem;
          line-height: 0.2rem;
          margin-left: 0.18rem;

          p{
            float: left;
            line-height: 0.3rem;
            font-size: 0.12rem;
            padding-right: 0.3rem;
            .iconfont {
              font-size: 0.16rem;
            }
            span {
              padding-left: 0.06rem;
            }
          }
        }
      }
    }
  }
</style>
